
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 富文本</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-富文本FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="富文本 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link current">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>富文本</h1>
    
    <p>富文本与普通文本的区别在于：</p>
<ul>
<li>普通文本不支持交互，鼠标/触摸感应是关闭的；富文本支持。</li>
<li>普通文本不支持链接和图文混排；富文本支持。</li>
<li>普通文本不支持HTML语法（但可以使用UBB实现不同样式）；富文本支持。</li>
</ul>
<p>点击主工具栏中的<img src="../../images/sidetb_04.png" alt>按钮，生成一个富文本。</p>
<h2 id="实例属性"><a href="#实例属性" class="headerlink" title="实例属性"></a>实例属性</h2><p><img src="../../images/QQ20191211-171911.png" alt></p>
<ul>
<li><p><img src="../../images/texttb_01.png" alt> 设置文本支持UBB语法。使用UBB语法可以使单个文本包含多种样式，例如字体大小，颜色等。请参考<a href="text.html#UBB语法">UBB语法</a>。</p>
</li>
<li><p><img src="../../images/texttb_02.png" alt> 选中后，文本可以使用{count=100}这样的语法表达一个文本参数。请参考<a href="text.html#文本模板">文本模板</a>。</p>
</li>
<li><p><img src="../../images/texttb_03.png" alt> 设置文本为单行。单行文本不会自动换行，换行符也被忽略。</p>
</li>
<li><p><img src="../../images/texttb_04.png" alt> 设置文本为粗体。</p>
</li>
<li><p><img src="../../images/texttb_05.png" alt> 设置文本为斜体。</p>
</li>
<li><p><img src="../../images/texttb_06.png" alt> 设置文本为下划线。</p>
</li>
<li><p><img src="../../images/texttb_07.png" alt> 表示文本只用作编辑器预览用途，发布时将会自动清除。</p>
</li>
<li><p><code>文本</code> 设置文本内容。富文本可直接使用<a href="#HTML语法">HTML语法</a>。当需要换行时，在编辑器里可以<strong>直接按回车</strong>，或者使用html标签“&lt;br/&gt;”亦可。代码赋值需要换行可以用“\n”。某些引擎，例如LayaAir，可能不支持回车符换行，可以使用&lt;br/&gt;试试。</p>
</li>
<li><p><code>字体</code> 设置文字使用的字体。<strong>你不需要每个文本设置一次字体。</strong>在项目属性里可以设置项目中所有文本默认使用的字体。运行时则通过<code>UIConfig.defaultFont</code>统一设置。如果需要使用位图字体，可以从资源库中把字体资源拖动到这里。如果使用TTF字体，那么你需要将字体安装到操作系统，然后再在这里输入字体名称，或者点击旁边的A按钮进行选择。</p>
</li>
<li><p><code>字体大小</code> 设置文字使用的字号。如果使用的是位图字体，你需要对位图字体设置“允许动态改变字号”，这里的选项才有效。</p>
</li>
<li><p><code>颜色</code> 设置文字颜色。如果使用的是位图字体，你需要对位图字体设置“允许动态改变颜色”，这里的选项才有效。</p>
</li>
<li><p><code>行距</code> 每行的像素间距。</p>
</li>
<li><p><code>字距</code> 每个字符的像素间距。<em>（目前H5类引擎均不支持）</em></p>
</li>
<li><p><code>自动大小</code> </p>
<ul>
<li><code>自动宽度和高度</code> 文本不会自动换行，宽度和高度都增长到容纳全部文本。</li>
<li><code>自动高度</code> 文本使用固定宽度排版，到达宽度后自动换行，高度增长到容纳全部文本。</li>
<li><code>自动收缩</code> 文本使用固定宽度排版，到达宽度后文本自动缩小，使所有文本依然全部显示。如果内容宽度小于文本宽度，则不做任何处理。</li>
<li><code>无</code> 文本使用固定宽度和高度排版，不会自动换行。</li>
</ul>
</li>
<li><p><code>对齐</code> 设置文本的对齐。</p>
</li>
<li><p><code>描边</code> 设置文本的描边效果。描边粗细数值不能过大，否则效果会比较奇怪。描边在各个引擎实现的方式不同，效果也不同，编辑器的效果也仅供参考。</p>
</li>
<li><p><code>投影</code> 设置文本的投影效果。投影效果可以看做是简化的描边效果，描边是所有方向，投影只有一个方向。投影和描边共用一个颜色设置。</p>
</li>
</ul>
<h2 id="GRichTextField"><a href="#GRichTextField" class="headerlink" title="GRichTextField"></a>GRichTextField</h2><p>富文本支持动态创建，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">GRichTextField aRichTextField = <span class="keyword">new</span> GRichTextField();</span><br><span class="line">aRichTextField.SetSize(<span class="number">100</span>,<span class="number">100</span>);</span><br><span class="line">aRichTextField.text = <span class="string">"&lt;a href='xxx'&gt;Hello World&lt;/a&gt;"</span>;</span><br></pre></td></tr></table></figure>
<p>侦听富文本中链接点击的方法是（这个事件是冒泡的，也就是你可以不在富文本上侦听，在它的父元件或者祖父元件上侦听都是可以的）：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//Unity/Cry/MonoGame, EventContext里的data就是href值。</span></span><br><span class="line">aRichTextField.onClickLink.Add(onClickLink);</span><br><span class="line"></span><br><span class="line"><span class="comment">//AS3/Egret，TextEvent.text就是href值。</span></span><br><span class="line">aRichTextField.addEventListener(TextEvent.LINK, onClickLink);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Egret，TextEvent.text就是href值。</span></span><br><span class="line">aRichTextField.addEventListener(TextEvent.LINK, <span class="keyword">this</span>.onClickLink, <span class="keyword">this</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Laya, onClickLink的参数就是href值。</span></span><br><span class="line">aRichTextField.<span class="keyword">on</span>(laya.events.Event.LINK,<span class="keyword">this</span>,<span class="keyword">this</span>.onClickLink);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Cocos2dx，EventContext.getDataValue().asString()就是href的值。</span></span><br><span class="line">aRichTextField-&gt;addEventListener(UIEventType::ClickLink, CC_CALLBACK_1(AClass::onClickLink, this));</span><br><span class="line"></span><br><span class="line"><span class="comment">//CocosCreator，onClickLink的第一个参数就是href值，可选的第二个参数是fgui.Event</span></span><br><span class="line">aRichTextField.<span class="keyword">on</span>(fgui.Event.LINK, <span class="keyword">this</span>.onClickLink, <span class="keyword">this</span>);</span><br></pre></td></tr></table></figure>
<p>富文本最重要的功能是支持HTML解析和渲染。普通的文本样式标签，例如<code>FONT</code>、<code>B</code>、<code>I</code>、<code>U</code>这些一般都能很好的支持。其他一些对象标签，例如<code>A</code>、<code>IMG</code>等在各个引擎中支持的力度有所不同：</p>
<ul>
<li><p><code>AS3/Starling</code> 支持<code>A</code>标签和<code>IMG</code>标签，支持混排UI库里的图片/动画和外部图片。支持定制超级链接的样式：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aRichTextField.ALinkFormat = <span class="keyword">new</span> TextFormat(...);</span><br><span class="line">aRichTextField.AHoverFormat = <span class="keyword">new</span> TextFormat(...);</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>Egret</code> 支持<code>A</code>标签。不支持图文混排。</p>
</li>
<li><p><code>Laya</code> 支持<code>A</code>标签和<code>IMG</code>标签，只支持混排外部图片，<strong>不支持UI库里的图片和动画</strong>。Laya版本的GRichTextField的实质是包装了Laya的HTMLDivElement，可以通过以下方式访问：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> div:HtmlDivElement = aRichTextField.div;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>Unity</code> 支持<code>A</code>、<code>IMG</code>、<code>INPUT</code>、<code>SELECT</code>，<code>P</code>等。请参考<a href="#HTML语法">这里</a></p>
</li>
<li><p><code>Cocos Creator</code> 支持 <code>A</code>、<code>IMG</code>。支持包里的和外部的图片，但不支持动画（动画显示成单帧）。Creator版本的GRichTextField的实质是包装了cc.RichText。</p>
</li>
</ul>
<h2 id="HTML语法"><a href="#HTML语法" class="headerlink" title="HTML语法"></a>HTML语法</h2><p>Unity/MonoGame版本对HTML解析有比较完整的支持。</p>
<ul>
<li><p><code>IMG</code> 支持混排UI库里的图片/动画和外部(网络）图片。加载外部图片的能力可以通过<a href="loader.html#GLoader">扩展Loader</a>提供。注意，img标签需要使用“/&gt;”结束，而不是“&gt;”。例如：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">&lt;img src=<span class="string">'ui://包名/图片名'</span>/&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//还可以指定图片的大小</span></span><br><span class="line">&lt;img src=<span class="string">'ui://包名/图片名'</span> width=<span class="string">'20'</span> height=<span class="string">'20'</span>/&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//还可以用百分比指定图片的大小</span></span><br><span class="line">&lt;img src=<span class="string">'ui://包名/图片名'</span> width=<span class="string">'50%'</span> height=<span class="string">'50%'</span>/&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>A</code> 显示一个超级链接。例如：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">&lt;a href=<span class="string">'xxx'</span>&gt;link text&lt;/a&gt;</span><br></pre></td></tr></table></figure>
<p>  支持定义超级链接的样式。如果是全局修改，可以使用HtmlParseOptions的静态属性，例如：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//注意：全局设置应该在创建富文本之前调用。</span></span><br><span class="line"><span class="comment">//设置整个项目中所有链接是否带下划线</span></span><br><span class="line">HtmlParseOptions.DefaultLinkUnderline = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//设置超级链接的颜色</span></span><br><span class="line">HtmlParseOptions.DefaultLinkColor = ...;</span><br><span class="line">HtmlParseOptions.DefaultLinkBgColor = ...;</span><br><span class="line">HtmlParseOptions.DefaultLinkHoverBgColor = ...;</span><br></pre></td></tr></table></figure>
<p>  如果你只想定义单个富文本的链接样式，那么可以这样：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">HtmlParseOptions options = aRichTextField.richTextField.htmlParseOptions;</span><br><span class="line">options.linkUnderline = <span class="literal">false</span>;</span><br><span class="line">options.linkColor = ...;</span><br><span class="line">options.linkBgColor = ...;</span><br><span class="line">options.linkHoverBgColor = ...;</span><br></pre></td></tr></table></figure>
<p>  如果同一个文本内的各个链接都需要不同颜色，那么在链接标签外围用颜色标签包住就行了。</p>
</li>
<li><p><code>INPUT</code> 支持显示以下语法：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//显示一个按钮</span></span><br><span class="line">&lt;input type=<span class="string">'button'</span> <span class="keyword">value</span>=<span class="string">'标题'</span>/&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//显示一个输入框</span></span><br><span class="line">&lt;input type=<span class="string">'text'</span> <span class="keyword">value</span>=<span class="string">'文本内容'</span>/&gt;</span><br></pre></td></tr></table></figure>
<p>  如果需要显示按钮，需要先定义按钮对应的资源，否则无法显示。例如：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">HtmlButton.resource = <span class="string">"ui://包名/按钮名"</span>;</span><br></pre></td></tr></table></figure>
<p>  对于输入框，可以定义输入框的边框颜色和边框大小，例如：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">HtmlInput.defaultBorderSize = <span class="number">2</span>;</span><br><span class="line">HtmlInput.defaultBorderColor = ...;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>SELECT</code> 是使用该标签可以显示一个下拉选择框。例如：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">&lt;<span class="keyword">select</span> name=<span class="string">''</span>&gt;</span><br><span class="line">    &lt;option <span class="keyword">value</span>=<span class="string">'1'</span>&gt;<span class="number">1</span>&lt;/option&gt;</span><br><span class="line">    &lt;option <span class="keyword">value</span>=<span class="string">'2'</span>&gt;<span class="number">2</span>&lt;/option&gt;</span><br><span class="line">&lt;/<span class="keyword">select</span>&gt;</span><br></pre></td></tr></table></figure>
<p>  在使用下拉框前，需要先定义下拉框对应的资源，否则无法显示。例如：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">HtmlSelect.resource = <span class="string">"ui://包名/下拉框组件名"</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>P</code> 例如显示一张居中的图片：</p>
  <figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">&lt;p align=<span class="string">'center'</span>&gt;&lt;img src=<span class="string">''</span>/&gt;&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<p>  默认情况下，GRichTextField将文本当做HTML片段处理，即对于空格、回车等空白字符是保留的。如果你希望当做完整的HTML处理，不保留空白，可以用以下几种方式：</p>
<ul>
<li>使用HtmlParseOptions：</li>
</ul>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">HtmlParseOptions options = aRichTextField.richTextField.htmlParseOptions;</span><br><span class="line">options.ignoreWhiteSpace = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li>将文本内容使用HTML或BODY标签包裹，例如：</li>
</ul>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aRichTextField.text = <span class="string">"&lt;body&gt;text  &lt;/body&gt;"</span>;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>如果要访问HTML中的对象，可以使用以下的方式：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//当前文本中具有的HTML元素数量</span></span><br><span class="line"><span class="keyword">int</span> cnt = aRichTextField.richTextField.htmlElementCount;</span><br><span class="line"></span><br><span class="line"><span class="comment">//获得指定索引的HTML元素，0=&lt;index&lt;cnt</span></span><br><span class="line">HtmlElement element = aRichTextField.richTextField.GetHtmlElementAt(index);</span><br><span class="line"></span><br><span class="line"><span class="comment">//获得指定名称的HTML元素。名称由HTML元素里的name属性指定。</span></span><br><span class="line">element = aRichTextField.richTextField.GetHtmlElement(elementName);</span><br><span class="line"></span><br><span class="line"><span class="comment">//获得HTML元素对应的HTML对象。HTML对象的类型有HtmlImage、HtmlLink、HtmlInput等。</span></span><br><span class="line">IHtmlObject htmlObject = (IHtmlObject)element.htmlObject;</span><br><span class="line"><span class="keyword">if</span>(element.type==HtmlElementType.Image)</span><br><span class="line">&#123;</span><br><span class="line">    HtmlImage image = (HtmlImage)htmlObject;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>又例如，如果要制作鼠标移到链接上显示信息的效果：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="keyword">int</span> cnt = richText.htmlObjectCount;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">int</span> i=<span class="number">0</span>;i&lt;cnt;i++) </span><br><span class="line">&#123;</span><br><span class="line">    IHtmlObject obj = richText.GetHtmlObjectAt(i);</span><br><span class="line">    <span class="keyword">if</span>(obj <span class="keyword">is</span> HtmlLink) </span><br><span class="line">    &#123;</span><br><span class="line">        ((HtmlLink)obj).shape.onRollOver.Add(onLinkRollOver);</span><br><span class="line">        ((HtmlLink)obj).shape.onRollOut.Add(onLinkRollOut);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//你可以在RollOver和RollOut的处理里调用GRoot.inst.ShowPopup、GRoot.inst.ShowTooltips或者其他处理。</span></span><br></pre></td></tr></table></figure>
<p>你也可以扩展实现自己的IHtmlObject。你需要自己实现一个IHtmlPageContext接口，然后赋值给RichTextField的htmlPageContext属性。详细可阅读源码。</p>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/richtext.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
